import React, { Component } from 'react';
import { List, Row, Col, ConfigProvider, Empty } from 'antd';
import moment from 'moment';
import Wheaders from '../../components/Headers';
import Http from '../../util/http';
import './index.less';

class ConsumptionLog extends Component {
    constructor(props) {
        super(props);
        this.state = {
            cinsumptionList: []
        }
    }

    render() {
        const { cinsumptionList } = this.state;

        return (
            <div className='pay-Record'>
                {/* <Headers></Headers> */}
                <Wheaders left={'返回'} middle={'消费记录'} right={'首页'} />
                <div className={'consumptionLog'}>
                    <ConfigProvider
                        renderEmpty={() => (
                            <Empty description={<span> 暂无记录~</span>} />
                        )}>
                        <List
                            dataSource={cinsumptionList}
                            size='small'
                            renderItem={item => (
                                <List.Item className={'list-item'} style={{ padding: '0' }}>
                                    <Row style={{ width: '100%' }}>
                                        <Col span={18}>
                                            <p className={'title'}>{item.novelName}</p>
                                            <p className={'chapter'}>{item.chapterName}</p>
                                            <p className={'time'}>{moment(item.addTime * 1000).format('YYYY-MM-DD HH:mm')}</p>
                                        </Col>
                                        <Col className={'coupon'} span={6}>
                                            - {item.coupon} 书卷
                                    </Col>
                                    </Row>
                                </List.Item>
                            )}
                        />
                    </ConfigProvider>
                </div>
            </div>
        );
    }

    UNSAFE_componentWillMount() {

    }

    componentDidMount() {

        this.getConsumptionLog();
    }

    getConsumptionLog = async (page = 1) => {
        await Http.get('/User/getConsumptionLog').then(response => {
            this.setState({ cinsumptionList: [...response.resultData, ...this.state.cinsumptionList] });
        })
    }
}
export default ConsumptionLog;


